<!--
 * @Description: 预约限量时间段选择
 * @Autor: 何兴家
 * @Date: 2020-11-25 16:50:47
 * @LastEditors: 何兴家
 * @LastEditTime: 2020-11-26 13:45:19
-->
<template>
  <div>
    <table cellspacing="0" cellpadding="0" border="1" v-loading="tableIsLoading">
      <tr>
        <th></th>
        <th v-for="(item, index) in dateTimeHeadList" :key="`date-${index}`">{{ item.date }}</th>
      </tr>
      <tr>
        <th>小时</th>
        <th v-for="(item, index) in dateTimeHeadList" :key="`day-${index}`">{{ item.dayNameCn }}</th>
      </tr>
      <tr v-for="(item, index) in surplusAppointmentTimeData" :key="`rows-${index}`">
        <td class="disabledChild">{{ item.TIME }}</td>
        <td
          v-for="(child, index_c) in dateTimeHeadList"
          :key="`child-${index_c}`"
          :class="['selectChild', item[child.dayNameEn] == 0 ? 'disabledChild' : '', item.selectedDay === child.dayNameEn ? 'selectedChild' : '']"
          @click="handleChildClick(item, child)"
        >
          {{ item[child.dayNameEn] }}
        </td>
      </tr>
    </table>

    <div class="btnWrap">
      <el-button @click="handleCancel">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { notifyAction } from '@/utils';

import { queryPrecontractComeTime } from '@/api/repair/repairReception/precontractArrange';

export default {
  props: ['defaultDate'],
  data() {
    return {
      timeDayList: [
        { en: 'sunday', cn: '星期日' },
        { en: 'monday', cn: '星期一' },
        { en: 'tuesday', cn: '星期二' },
        { en: 'wednesday', cn: '星期三' },
        { en: 'thursday', cn: '星期四' },
        { en: 'friday', cn: '星期五' },
        { en: 'saturday', cn: '星期六' }
      ],
      dateTimeHeadList: [], // 时间日期数组(表头)
      surplusAppointmentTimeData: [], // 预约限量数据
      selectedDate: '', // 选中的日期
      tableIsLoading: false // 数据是否在请求中
    };
  },
  mounted() {
    this.querySurplusAppointmentTime();
    this.createDateTimeList();
  },
  methods: {
    // 查询剩余预约次数及时间
    async querySurplusAppointmentTime() {
      this.tableIsLoading = true;
      try {
        let res = await queryPrecontractComeTime();
        if (res.resultCode == 200) {
          res.data.forEach(item => {
            item.selectedDay = '';
          });
          this.surplusAppointmentTimeData = res.data;
          if (this.defaultDate) {
            this.selectedDate = this.defaultDate;
            this.setSelectStatusByDate(this.selectedDate);
          }
        }
      } catch (err) {
        console.log(err, '查询预约限量失败');
      } finally {
        this.tableIsLoading = false;
      }
    },
    // 创建时间日期列表（表头数据）
    createDateTimeList() {
      let arr = [];
      for (let i = 0; i < 7; i++) {
        let today = moment().add(i, 'days');
        arr.push({
          date: today.format('YYYY-MM-DD'),
          day: +today.format('d'),
          dayNameEn: this.timeDayList[today.format('d')].en,
          dayNameCn: this.timeDayList[today.format('d')].cn
        });
      }
      this.dateTimeHeadList = arr;
    },
    // 点击某一行向
    handleChildClick(row, date) {
      console.log(row, date, 'hexj001');
      if (row[date.dayNameEn] == 0) return;

      this.selectedDate = date.date + ' ' + row.BOOKING_HOUR;
      this.setSelectStatusByDate(this.selectedDate); // 设置默认选中
    },
    // 根据日期设置选中状态
    setSelectStatusByDate(dateTime) {
      let date = dateTime.split(' ')[0];
      let time = dateTime.split(' ')[1];
      this.surplusAppointmentTimeData.forEach(item => {
        item.selectedDay = '';
      });
      this.surplusAppointmentTimeData.find(item => item.BOOKING_HOUR === time).selectedDay = this.dateTimeHeadList.find(item => item.date === date).dayNameEn;
    },
    // 点击取消
    handleCancel() {
      this.$emit('close');
    },
    handleConfirm() {
      if (!this.selectedDate) return notifyAction('请选择预约日期', 'warning');
      this.$emit('onConfirm', this.selectedDate);
    }
  }
};
</script>

<style scoped>
table {
  table-layout: fixed;
  width: 100%;
  border: 1px grey solid;
  text-align: center;
}
tr,
th,
td {
  border: 1px grey solid;
}
th {
  height: 40px;
  padding: 0;
  background: #f2f2f2;
  font-weight: bold;
  vertical-align: middle;
  cursor: not-allowed;
}
td {
  height: 37px;
  background: #fff;
  vertical-align: middle;
}
.selectChild {
  cursor: pointer;
}
.selectChild:hover {
  background: #f2f2f2;
}
.disabledChild {
  cursor: not-allowed;
  background: #f2f2f2;
}
.selectedChild {
  background: #f2f2f2;
}

.btnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
